import { FC, useEffect, useRef } from "react"
import {
    AxesHelper, PerspectiveCamera,
    PointLight, Scene, WebGLRenderer, AmbientLight, Vector3
} from "three"
import {
    EllipseCurveLineModel, EllipseCurvePointModel,
    catmullrowLineModel, arcCurveModel,
    splineModel, curvePathModel, TubeModel,
    latheModel, latheModel1, ShapModel, ExtrudeModel,
    ExtrudeModel1, LineSegmentsModel
} from "../models";
import { OrbitControls } from "three/examples/jsm/Addons.js";
import { GUI } from "dat.gui";
// 椭圆点位置
const lightPosition = new Vector3(60, 80, 100),
    pma = new Vector3(1, 1, 2),
    // 圆型位置
    dlpma = new Vector3(6, 2, 1),
    //  三维曲线位置
    pmabt = new Vector3(0, 0, 7),
    //  组合线段模型
    curvePathPostion = new Vector3(0, -1, -1),
    // 线段路径模型位置
    tubePosition = new Vector3(0, 0, -5),
    // 旋转成型模型位置
    latheGeoPosition = new Vector3(-2, -5, -5),
    // 旋转成型
    latheGeoPosition1 = new Vector3(-2, 6, 5),
    // 路径面
    ShapPosition = new Vector3(5, 5, 5),
    // 路径面直线拉伸模型
    extrudePosition = new Vector3(-5, -5, 6),
    // 路径面根据线段移动成型模型
    extrude1Position = new Vector3(-20, -3, 0)

const Page: FC = () => {
    const container = useRef<HTMLCanvasElement>(null);
    // 基本对象
    useEffect(() => {
        const bodyele = document.body;
        const renderer = new WebGLRenderer({ canvas: container.current! }),
            camera = new PerspectiveCamera(90, bodyele.clientWidth / bodyele.clientHeight, 1, 1000),
            scene = new Scene(),
            pointLight = new PointLight(0xffffff, 10),
            axesHelper = new AxesHelper(100);
        renderer.setClearAlpha(.4)
        const gui = new GUI()
        EllipseCurvePointModel.position.add(pma)
        arcCurveModel.position.add(dlpma)
        catmullrowLineModel.position.add(pmabt)
        new OrbitControls(camera, renderer.domElement)
        pointLight.position.copy(lightPosition)
        pointLight.decay = 0
        curvePathModel.position.copy(curvePathPostion)
        TubeModel.position.copy(tubePosition)
        latheModel.position.copy(latheGeoPosition)
        latheModel1.position.copy(latheGeoPosition1)
        ShapModel.position.copy(ShapPosition)
        ExtrudeModel.position.copy(extrudePosition)
        ExtrudeModel1.position.copy(extrude1Position)
        LineSegmentsModel.position.copy(ExtrudeModel.position)
        scene.add(new AmbientLight(0xffffff, 1), axesHelper,
            EllipseCurveLineModel,
            arcCurveModel, catmullrowLineModel,
            EllipseCurvePointModel, splineModel,
            pointLight, curvePathModel, TubeModel,
            latheModel, latheModel1, ShapModel,
            ExtrudeModel, ExtrudeModel1, LineSegmentsModel,
        )
        scene.traverse((item) => {
            console.log(item);

        })
        camera.position.set(15, 14, 13)
        camera.lookAt(EllipseCurveLineModel.position)
        renderer.setSize(bodyele.clientWidth * devicePixelRatio, bodyele.clientHeight * devicePixelRatio)
        function roun(t?: number) {
            renderer.render(scene, camera)
            requestAnimationFrame(roun)
        }
        roun()
        return () => {
            EllipseCurvePointModel.position.sub(pma)
            arcCurveModel.position.sub(dlpma)
            catmullrowLineModel.position.sub(pmabt)
            gui.destroy()
            renderer.dispose()
        }
    }, [])
    return <canvas ref={container}></canvas>
}
export default Page